<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>try/catch 捕获错误信息</title>
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <div class="d-grid gap-2 col-3 mx-auto" style="margin-top:50px">
    <p>我是测试文字</p>

    <button type="button" class="btn btn-danger del">删除</button>
    <button type="button" class="btn btn-primary change">变色</button>
  </div>

  <script>
    // ============================== try/catch 捕获错误信息 ==============================

    // 删除功能
    document.querySelector('.del').addEventListener('click', function () {
      document.querySelector('p').remove()
    })

    // 变色功能
      document.querySelector('.change').addEventListener('click', function () {
      try{
        document.querySelector('p').style.color = 'red'
      }catch(error){
          console.log(error)  // error就是错误信息
          
      }finally{
        console.log('无论是否有错都会执行')
        
      }
    })
  </script>
</body>

</html>